<template>
  <div class="container">
    <div class="container-item">
      <div class="item-title">车辆申请次数统计</div>
      <div class="right-bar">
        <!-- <el-button-group>
          <el-button type="primary" plain @click="selectDate('day')">今日</el-button>
          <el-button type="primary" plain @click="selectDate('week')">本周</el-button>
          <el-button type="primary" plain @click="selectDate('month')" :autofocus="true">本月</el-button>
        </el-button-group>-->
        <el-radio-group @change="selectDate" v-model="pmCurrentType">
          <el-radio-button label="今日"></el-radio-button>
          <el-radio-button label="本周"></el-radio-button>
          <el-radio-button label="本月"></el-radio-button>
        </el-radio-group>

        <el-select v-model="selectMonth" placeholder="查询指定月份">
          <el-option v-for="item in 12" :key="item" :label="`${item}月`" :value="item"></el-option>
        </el-select>

        <span style="margin-left:10px"></span>
        <el-date-picker
          v-model="selStartEnd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="selectDateRange"
        ></el-date-picker>
      </div>
      <div class="content-container">
        <div class="content-chart">
          <div id="myChart" style="width:100%;height:350px"></div>
        </div>
        <div class="content-rank">
          <div style="margin-bottom:10px">部门里程排行(KM)</div>
          <div>
            <RankWidget :items="partmentKMRanking" :fields="['name','totalKM']" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRequestHeader } from "../api/user.js";
import { getPartmentCountApi } from "../api/reportAndMsg.js";
import RankWidget from "./widget/RankWidget";
import moment from "moment";
export default {
  components: {
    RankWidget,
  },
  data() {
    return {
      pmCurrentType: "本月",
      selStartEnd: "",
      mPartmentCountList: [],
      dateStart: "",
      dateEnd: "",
      selectMonth: "",
      pmChart: {},
      parmentUseOptions: {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "用车次数",
            type: "bar",
            barWidth: "60%",
            data: [],
          },
        ],
      },
    };
  },
  mounted() {
    this.pmChart = this.$echarts.init(document.getElementById("myChart"));
    this.selectDate("本月");
    this.refreshData();
  },
  watch: {
    selectMonth(data) {
      const now = moment();
      this.dateStart = now
        .clone()
        .month(data - 1)
        .startOf("month")
        .format("YYYY-MM-DD HH:mm:ss");
      this.dateEnd = now
        .clone()
        .month(data - 1)
        .endOf("month")
        .format("YYYY-MM-DD HH:mm:ss");
      this.refreshData();
      this.pmCurrentType = "";
    },
  },
  computed: {
    partmentUseCountRanking() {
      return this.mPartmentCountList.sort((a, b) => b.useCount - a.useCount);
    },
    partmentKMRanking() {
      return this.mPartmentCountList.sort((a, b) => b.totalKM - a.totalKM);
    },
  },
  methods: {
    refreshData() {
      //刷新部门用车信息
      const depts = [];
      const useCounts = [];
      this.getPartments();
      this.partmentUseCountRanking.map((o) => {
        depts.push(o.name);
        useCounts.push(o.useCount);
      });
      this.parmentUseOptions.xAxis[0].data = depts;
      this.parmentUseOptions.series[0].data = useCounts;
      this.pmChart.setOption(this.parmentUseOptions, true);
    },
    selectDate(type) {
      let typeCode = "";
      if (type == "本月") {
        typeCode = "month";
      } else if (type == "本周") {
        typeCode = "week";
      } else {
        typeCode = "day";
      }
      const now = moment();
      this.dateStart = now
        .clone()
        .startOf(typeCode)
        .format("YYYY-MM-DD HH:mm:ss");
      this.dateEnd = now.clone().endOf(typeCode).format("YYYY-MM-DD HH:mm:ss");
      this.refreshData();
    },
    selectDateRange(range) {
      this.dateStart = range[0];
      this.dateEnd = moment(range[1])
        .endOf("day")
        .format("YYYY-MM-DD HH:mm:ss");
      this.refreshData();
      this.pmCurrentType = "";
    },
    getPartments() {
      var that = this;
      getPartmentCountApi(
        that.dateStart,
        that.dateEnd,
        getRequestHeader(),
        new (function () {
          this.success = function (data) {
            that.mPartmentCountList = data;
          };
          this.fail = function (msg) {
            that.mPartmentCountList = [];
          };
        })()
      );
    },
  },
};
</script>

<style scoped>
.container-item {
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  background: white;
  color: #303133;
}
.item-title {
  font-weight: bold;
  margin-bottom: 10px;
}
.right-bar {
  text-align: right;
}
.content-container {
  display: flex;
  flex-flow: row nowrap;
  margin-top: 20px;
}
.content-chart {
  flex: 5;
}
.content-rank {
  flex: 1;
}
</style>>

</style>